Fetch API

# 安装 polyfill
npm install whatwg-fetch --save

// 在入口文件中引入
import 'whatwg-fetch'

// 或者有条件地引入
if (!window.fetch) {
  require('whatwg-fetch')
}

// 检测浏览器是否支持 Fetch API
if (window.fetch) {
  // 支持 Fetch API
  fetch('/api/data')
    .then(response => response.json())
    .then(data => console.log(data))
} else {
  // 降级使用 XMLHttpRequest 或其他方案
  console.log('浏览器不支持 Fetch API,请使用 polyfill 或降级方案')
}

const xhr = new XMLHttpRequest()
xhr.open('GET', '/api/data', true)
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText)
      console.log(data)
    } else {
      console.error('请求失败:', xhr.status)
    }
  }
}
xhr.onerror = function() {
  console.error('网络错误')
}
xhr.send()

fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    return response.json()
  })
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error))

async function fetchData() {
  try {
    const response = await fetch('/api/data')
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`)
    }
    const data = await response.json()
    console.log(data)
  } catch (error) {
    console.error('请求失败:', error)
  }
}

// 实现 Axios 风格的 fetch 封装
class FetchClient {
  constructor(config = {}) {
    this.baseURL = config.baseURL || ''
    this.timeout = config.timeout || 0
    this.headers = config.headers || {}
    this.interceptors = {
      request: [],
      response: []
    }
  }
  
  // 拦截器
  useRequestInterceptor(onFulfilled, onRejected) {
    this.interceptors.request.push({ onFulfilled, onRejected })
  }
  
  useResponseInterceptor(onFulfilled, onRejected) {
    this.interceptors.response.push({ onFulfilled, onRejected })
  }
  
  // 核心请求方法
  async request(config) {
    // 合并配置
    let newConfig = {
      ...config,
      baseURL: config.baseURL || this.baseURL,
      timeout: config.timeout || this.timeout,
      headers: { ...this.headers, ...config.headers }
    }
    
    // 执行请求拦截器
    for (const interceptor of this.interceptors.request) {
      newConfig = await interceptor.onFulfilled(newConfig)
    }
    
    // 构建 URL
    const url = newConfig.baseURL + newConfig.url
    
    // 发起请求
    let response
    try {
      response = await fetch(url, {
        method: newConfig.method,
        headers: newConfig.headers,
        body: newConfig.data ? JSON.stringify(newConfig.data) : undefined
      })
    } catch (error) {
      // 网络错误
      for (const interceptor of this.interceptors.response) {
        if (interceptor.onRejected) await interceptor.onRejected(error)
      }
      throw error
    }
    
    // 处理响应
    const data = await response.json().catch(() => null)
    const result = { data, status: response.status, headers: response.headers }
    
    // 执行响应拦截器
    for (const interceptor of this.interceptors.response) {
      await interceptor.onFulfilled(result)
    }
    
    return data
  }
  
  get(url, config = {}) {
    return this.request({ ...config, url, method: 'GET' })
  }
  
  post(url, data, config = {}) {
    return this.request({ ...config, url, method: 'POST', data })
  }
}


// 使用
const client = new FetchClient({ baseURL: 'https://api.example.com' })
client.useRequestInterceptor((config) => {
  config.headers.Authorization = 'Bearer token'
  return config
})

async function getUsers() {
  try {
    const data = await client.get('/users')
    console.log(data)
  } catch (error) {
    console.error(error)
  }
}

let r = fetch("/bar")

console.log(r) // Promise <pending>

fetch("bar.txt").then((response) => {
  console.log(response)
})

// Response { type: "basic", url: ... }

fetch("bar.txt").then((response) => {
  response.text().then((data) => {
    console.log(data) // bar.txt 的内容
  })
})

fetch("bar.txt")
  .then((response) => response.text())
  .then((data) => console.log(data))

fetch("/bar").then((response) => {
  console.log(response.status) // 200
  console.log(response.statusText) // OK
})

fetch("/does-not-exist").then((response) => {
  console.log(response.status) // 404
  console.log(response.statusText) // Not Found
})

fetch("/throw-server-error").then((response) => {
  console.log(response.status) // 500
  console.log(response.statusText) // Internal Server Error
})

fetch("/permanent-redirect").then((response) => {
  // 默认行为是跟随重定向直到最终 URL
  // 这个例子会出现至少两轮网络请求
  // <origin url>/permanent-redirect -> <redirect url>

  console.log(response.status) // 200
  console.log(response.statusText) // OK
  console.log(response.redirected) // true
})

fetch("/bar").then((response) => {
  console.log(response.status) // 200
  console.log(response.ok) // true
})

fetch("/does-not-exist").then((response) => {
  console.log(response.status) // 404
  console.log(response.ok) // false
})

fetch("/hangs-forever").then(
  (response) => {
    console.log(response)
  },
  (err) => {
    console.log(err)
  }
)

//（浏览器超时后）
// TypeError: "NetworkError when attempting to fetch resource."

// foo.com/bar/baz 发送的请求
console.log(window.location.href) // https://foo.com/bar/baz

fetch("qux").then((response) => console.log(response.url))
// https://foo.com/bar/qux

fetch("/qux").then((response) => console.log(response.url))
// https://foo.com/qux

fetch("//qux.com").then((response) => console.log(response.url))
// https://qux.com

fetch("https://qux.com").then((response) => console.log(response.url))
// https://qux.com

// 同源请求
fetch('/api/data')
  .then(response => console.log(response.type)) // "basic"

// CORS 跨域请求
fetch('https://api.example.com/data')
  .then(response => console.log(response.type)) // "cors"

// no-cors 模式
fetch('https://api.example.com/data', { mode: 'no-cors' })
  .then(response => console.log(response.type)) // "opaque"

// 检查响应类型
fetch('/api/data')
  .then(response => {
    if (response.type === 'basic' || response.type === 'cors') {
      // 可以读取响应内容
      return response.json()
    } else if (response.type === 'opaque') {
      // 无法读取响应内容
      console.log('Opaque response - cannot read content')
    }
  })

let payload = JSON.stringify({
  foo: "bar"
})

let jsonHeaders = new Headers({
  "Content-Type": "application/json"
})

fetch("/send-me-json", {
  method: "POST", // 发送请求体时必须使用一种 HTTP 方法
  body: payload,
  headers: jsonHeaders
})

let payload = "foo=bar&baz=qux"

let paramHeaders = new Headers({
  "Content-Type": "application/x-www-form-urlencoded; charset=UTF-8"
})

fetch("/send-me-params", {
  method: "POST", // 发送请求体时必须使用一种 HTTP 方法
  body: payload,
  headers: paramHeaders
})

let imageFormData = new FormData()
let imageInput = document.querySelector("input[type='file']")

imageFormData.append("image", imageInput.files[0])

fetch("/img-upload", {
  method: "POST",
  body: imageFormData
})

async function postJSON(url, data) {
  const response = await fetch(url, {
    method: "POST",
    headers: {
      "Content-Type": "application/json"
    },
    body: JSON.stringify(data)
  })

  if (!response.ok) {
    const message = await response.text()
    throw new Error(`请求失败：${response.status} ${message}`)
  }

  return response.json()
}

let imageFormData = new FormData()

let imageInput = document.querySelector("input[type='file'][multiple]")

for (let i = 0; i < imageInput.files.length; ++i) {
  imageFormData.append("image", imageInput.files[i])
}

fetch("/img-upload", {
  method: "POST",
  body: imageFormData
})

const imageElement = document.querySelector("img")

fetch("my-image.png")
  .then((response) => response.blob())
  .then((blob) => {
    imageElement.src = URL.createObjectURL(blob)
  })

fetch("//cross-origin.com")

// TypeError: Failed to fetch
// No 'Access-Control-Allow-Origin' header is present on the requested resource

fetch("//cross-origin.com", { mode: "no-cors" }).then((response) => console.log(response.type))

// opaque

async function downloadWithProgress(url, onProgress) {
  const response = await fetch(url)
  if (!response.body) throw new Error("ReadableStream 不可用")

  const reader = response.body.getReader()
  const contentLength = Number(response.headers.get("Content-Length") ?? 0)
  let received = 0

  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    received += value.length
    onProgress?.(received, contentLength)
  }
}

let abortController = new AbortController()

fetch("wikipedia.zip", { signal: abortController.signal }).catch(() => console.log("aborted!"))

// 10 毫秒后中断请求
setTimeout(() => abortController.abort(), 10)

// 已经中断

let h = new Headers()
let m = new Map()

// 设置键
h.set("foo", "bar")
m.set("foo", "bar")

// 检查键
console.log(h.has("foo")) // true
console.log(m.has("foo")) // true
console.log(h.has("qux")) // false
console.log(m.has("qux")) // false

// size 属性
console.log(h.size) // 1
console.log(m.size) // 1

// 获取值
console.log(h.get("foo")) // "bar"
console.log(m.get("foo")) // "bar"

h.delete("foo")
m.delete("foo")

// 确定值已经删除
console.log(h.get("foo")) // undefined
console.log(m.get("foo")) // undefined

let seed = [["foo", "bar"]]
let h = new Headers(seed)
let m = new Map(seed)
console.log(h.get("foo")) // bar
console.log(m.get("foo")) // bar

let seed = [
  ["foo", "bar"],
  ["baz", "qux"]
]
let h = new Headers(seed)
let m = new Map(seed)

console.log(...h.keys()) // foo, baz
console.log(...m.keys()) // foo, baz

console.log(...h.values()) // bar, qux
console.log(...m.values()) // bar, qux

console.log(...h.entries()) // ['foo', 'bar'], ['baz', 'qux']
console.log(...m.entries()) // ['foo', 'bar'], ['baz', 'qux']

let seed = { foo: "bar" }
let h = new Headers(seed)

console.log(h.get("foo")) // bar

let m = new Map(seed)
// TypeError: object is not iterable

let h = new Headers()

h.append("foo", "bar")
console.log(h.get("foo")) // "bar"

h.append("foo", "baz")
console.log(h.get("foo")) // "bar, baz"

let r = new Request("https://foo.com")
console.log(r)
// Request {...}

// 用所有默认值创建 Request 对象
console.log(new Request(""))
// Request {
// bodyUsed: false
// cache: "default"
// credentials: "same-origin"
// destination: ""
// headers: Headers {}
// integrity: ""
// keepalive: false
// method: "GET"
// mode: "cors"
// redirect: "follow"
// referrer: "about:client"
// referrerPolicy: ""
// signal: AbortSignal {aborted: false, onabort: null}
// url: "https://foo.com/"
// }

let r1 = new Request("https://foo.com")
let r2 = new Request(r1)
console.log(r2.url) // https://foo.com/

let r1 = new Request("https://foo.com")

let r2 = new Request(r1, { method: "POST" })

console.log(r1.method) // GET
console.log(r2.method) // POST

let r1 = new Request("https://foo.com", { method: "POST", body: "foobar" })

let r2 = new Request(r1)

console.log(r1.bodyUsed) // true
console.log(r2.bodyUsed) // false

let r1 = new Request("https://foo.com", { method: "POST", body: "foobar" })
let r2 = r1.clone()

console.log(r1.url) // https://foo.com/
console.log(r2.url) // https://foo.com/

console.log(r1.bodyUsed) // false
console.log(r2.bodyUsed) // false

let r = new Request('https://foo.com');
r.clone();
new Request(r);

// 没有错误

r.text(); // 设置 bodyUsed 为 true

r.clone();

// TypeError: Failed to execute 'clone' on 'Request': Request body is already used
new Request(r);

// TypeError: Failed to construct 'Request': Cannot construct a Request with a
Request object that has already been used.

let r = new Request("https://foo.com")
// 向 foo.com 发送 GET 请求
fetch(r)

// 向 foo.com 发送 POST 请求
fetch(r, { method: "POST" })

let r = new Request("https://foo.com", { method: "POST", body: "foobar" })
r.text()

fetch(r)
// TypeError: Cannot construct a Request with a Request object that has already been used.

let r = new Request("https://foo.com", { method: "POST", body: "foobar" })

fetch(r)
fetch(r)
// TypeError: Cannot construct a Request with a Request object that has already been used.

let r = new Request("https://foo.com", { method: "POST", body: "foobar" })

// 3 个都会成功
fetch(r.clone())
fetch(r.clone())
fetch(r)

async function safeFetch(url, options) {
  try {
    const response = await fetch(url, options)
    if (!response.ok) {
      const message = await response.text()
      throw new Error(`HTTP ${response.status}: ${message}`)
    }
    return response
  } catch (error) {
    console.error("请求失败", error)
    throw error
  }
}

function fetchWithTimeout(resource, options = {}) {
  const { timeout = 8000, ...rest } = options
  const controller = new AbortController()
  const timer = setTimeout(() => controller.abort(), timeout)

  return fetch(resource, { ...rest, signal: controller.signal }).finally(() => {
    clearTimeout(timer)
  })
}

async function retryFetch(url, options = {}, retries = 3) {
  try {
    return await fetch(url, options)
  } catch (error) {
    if (retries <= 0) throw error
    await new Promise((resolve) => setTimeout(resolve, 2 ** (3 - retries) * 100))
    return retryFetch(url, options, retries - 1)
  }
}

let r = new Response()
console.log(r)

// Response {
// body: (...)
// bodyUsed: false
// headers: Headers {}
// ok: true
// redirected: false
// status: 200
// statusText: "OK"
// type: "default"
// url: ""
// }

let r = new Response("foobar", {
  status: 418,
  statusText: "I'm a teapot"
})

console.log(r)

// Response {
// body: (...)
// bodyUsed: false
// headers: Headers {}
// ok: false
// redirected: false
// status: 418
// statusText: "I'm a teapot"
// type: "default"
// url: ""
// }

fetch("https://foo.com").then((response) => {
  console.log(response)
})

// Response {
// body: (...)
// bodyUsed: false
// headers: Headers {}
// ok: true
// redirected: false
// status: 200
// statusText: "OK"
// type: "basic"
// url: "https://foo.com/"
// }

console.log(Response.redirect("https://foo.com", 301))

// Response {
// body: (...)
// bodyUsed: false
// headers: Headers {}
// ok: false
// redirected: false
// status: 301
// statusText: ""
// type: "default"
// url: ""
// }

Response.redirect("https://foo.com", 200)
// RangeError: Failed to execute 'redirect' on 'Response': Invalid status code

console.log(Response.error())

// Response {
// body: (...)
// bodyUsed: false
// headers: Headers {}
// ok: false
// redirected: false
// status: 0
// statusText: ""
// type: "error"
// url: ""
// }

let r1 = new Response("foobar")
let r2 = r1.clone()
console.log(r1.bodyUsed) // false
console.log(r2.bodyUsed) // false

let r = new Response("foobar")
r.clone()
// 没有错误
r.text() // 设置 bodyUsed 为 true
r.clone()
// TypeError: Failed to execute 'clone' on 'Response': Response body is already used

let r = new Response("foobar")

r.text().then(console.log) // foobar
r.text().then(console.log)

// TypeError: Failed to execute 'text' on 'Response': body stream is locked

let r = new Response("foobar")

r.clone().text().then(console.log) // foobar
r.clone().text().then(console.log) // foobar
r.text().then(console.log) // foobar

let r1 = new Response("foobar")

let r2 = new Response(r1.body)

console.log(r1.bodyUsed) // false
console.log(r2.bodyUsed) // false

r2.text().then(console.log) // foobar
r1.text().then(console.log)

// TypeError: Failed to execute 'text' on 'Response': body stream is locked

fetch("https://foo.com")
  .then((response) => response.text())
  .then(console.log)

// <!doctype html><html lang="en">
// <head>
// <meta charset="utf-8">
// ...

let request = new Request("https://foo.com", { method: "POST", body: "barbazqux" })

request.text().then(console.log)
// barbazqux

fetch("https://foo.com/foo.json")
  .then((response) => response.json())
  .then(console.log)
// {"foo": "bar"}

let request = new Request("https://foo.com", { method: "POST", body: JSON.stringify({ bar: "baz" }) })

request.json().then(console.log)
// {bar: 'baz'}

let myFormData = new FormData()
myFormData.append("foo", "bar")

------WebKitFormBoundarydR9Q2kOzE6nbN7eR
Content-Disposition: form-data; name="foo"
bar
------WebKitFormBoundarydR9Q2kOzE6nbN7eR--

fetch('https://foo.com/form-data')
 .then((response) => response.formData())
 .then((formData) => console.log(formData.get('foo'));
// bar

let myFormData = new FormData();

myFormData.append('foo', 'bar');

let request = new Request('https://foo.com', { method:'POST', body: myFormData });

request.formData().then((formData) => console.log(formData.get('foo')); // bar

fetch("https://foo.com")
  .then((response) => response.arrayBuffer())
  .then(console.log)
// ArrayBuffer(...) {}

let request = new Request("https://foo.com", { method: "POST", body: "abcdefg" })

// 以整数形式打印二进制编码的字符串
request.arrayBuffer().then((buf) => console.log(new Int8Array(buf)))
// Int8Array(7) [97, 98, 99, 100, 101, 102, 103]

fetch("https://foo.com")
  .then((response) => response.blob())
  .then(console.log)
// Blob(...) {size:..., type: "..."}

let request = new Request("https://foo.com", { method: "POST", body: "abcdefg" })

request.blob().then(console.log)
// Blob(7) {size: 7, type: "text/plain;charset=utf-8"}

fetch("https://foo.com").then((response) => response.blob().then(() => response.blob()))

// TypeError: Failed to execute 'blob' on 'Response': body stream is locked
let request = new Request("https://foo.com", { method: "POST", body: "foobar" })
request.blob().then(() => request.blob())

// TypeError: Failed to execute 'blob' on 'Request': body stream is locked

fetch("https://foo.com").then((response) => {
  response.blob() // 第一次调用给流加锁
  response.blob() // 第二次调用再次加锁会失败
})

// TypeError: Failed to execute 'blob' on 'Response': body stream is locked

let request = new Request("https://foo.com", { method: "POST", body: "foobar" })

request.blob() // 第一次调用给流加锁

request.blob() // 第二次调用再次加锁会失败

// TypeError: Failed to execute 'blob' on 'Request': body stream is locked

let request = new Request("https://foo.com", { method: "POST", body: "foobar" })

let response = new Response("foobar")

console.log(request.bodyUsed) // false
console.log(response.bodyUsed) // false

request.text().then(console.log) // foobar
response.text().then(console.log) // foobar

console.log(request.bodyUsed) // true
console.log(response.bodyUsed) // true

fetch("https://fetch.spec.whatwg.org/")
  .then((response) => response.body)
  .then((body) => {
    let reader = body.getReader()
    console.log(reader) // ReadableStreamDefaultReader {}
    reader.read().then(console.log)
  })

// { value: Uint8Array{}, done: false }

fetch("https://fetch.spec.whatwg.org/")
  .then((response) => response.body)
  .then((body) => {
    let reader = body.getReader()
    function processNextChunk({ value, done }) {
      if (done) {
        return
      }
      console.log(value)
      return reader.read().then(processNextChunk)
    }
    return reader.read().then(processNextChunk)
  })
// { value: Uint8Array{}, done: false }
// { value: Uint8Array{}, done: false }
// { value: Uint8Array{}, done: false }
// ...

fetch("https://fetch.spec.whatwg.org/")
  .then((response) => response.body)
  .then(async function (body) {
    let reader = body.getReader()
    while (true) {
      let { value, done } = await reader.read()
      if (done) {
        break
      }
      console.log(value)
    }
  })
// { value: Uint8Array{}, done: false }
// { value: Uint8Array{}, done: false }
// { value: Uint8Array{}, done: false }
// ...

// 默认缓存策略(遵循 HTTP 缓存头)
fetch('/api/data', { cache: 'default' })

// 强制缓存(使用缓存,即使过期也不验证)
fetch('/api/data', { cache: 'force-cache' })

// 不使用缓存,每次都从网络获取
fetch('/api/data', { cache: 'no-store' })

// 不使用缓存,但会更新缓存
fetch('/api/data', { cache: 'reload' })

// 使用缓存,但会在后台更新
fetch('/api/data', { cache: 'no-cache' })

// 只使用缓存,不发起网络请求
fetch('/api/data', { cache: 'only-if-cached' })

// 流式下载大文件
async function streamDownload(url) {
  const response = await fetch(url)
  const reader = response.body.getReader()
  const chunks = []
  
  while (true) {
    const { done, value } = await reader.read()
    if (done) break
    chunks.push(value)
    // 可以在这里处理每个 chunk,实现渐进式展示
    console.log('收到数据块:', chunk)
  }

  // 完整读取后拼接并解析
  const fullText = decoder.decode()
  try {
    const data = JSON.parse(fullText)
    console.log('完整数据:', data)
  } catch (e) {
    console.error('JSON 解析错误:', e)
  }
}

// 使用
async function streamJSON(url) {
  const response = await fetch(url)
  if (!response.ok) throw new Error('请求失败')
  await processStream(response.body)
}

// 场景:搜索框输入时取消上一次请求
let abortController = null

async function search(keyword) {
  // 取消上一次请求
  if (abortController) {
    abortController.abort()
  }
  
  abortController = new AbortController()
  
  try {
    const response = await fetch(`/api/search?q=${encodeURIComponent(keyword)}`, {
      signal: abortController.signal
    })
    const results = await response.json()
    renderResults(results)
  } catch (error) {
    // 忽略 AbortError（请求被主动取消）
    if (error.name === 'AbortError') {
      console.log('请求已取消')
      return
    }
    console.error('搜索失败:', error)
  }
}

// 维护所有请求控制器,以便统一取消
const controllers = new Set()
function trackRequest(controller) {
  controllers.add(controller)
  return controller.signal
}

// 页面卸载时取消所有请求
window.addEventListener('beforeunload', () => {
  controllers.forEach(controller => controller.abort())
  controllers.clear()
})

// 并发请求池
class RequestPool {
  constructor(maxConcurrent = 6) {
    this.maxConcurrent = maxConcurrent
    this.current = 0
    this.queue = []
  }
  
  async request(url, options) {
    if (this.current >= this.maxConcurrent) {
      await new Promise(resolve => this.queue.push(resolve))
    }
    
    // 获取执行权限
    this.current++
    try {
      const response = await fetch(url, options)
      return await response.json()
    } finally {
      this.current--
      // 唤醒队列中的下一个请求
      if (this.queue.length > 0) {
        const next = this.queue.shift()
        next()
      }
    }
  }
}

// 使用示例
const pool = new RequestPool(3) // 最多 3 个并发请求

const urls = ['/api/1', '/api/2', '/api/3', '/api/4', '/api/5']
const promises = urls.map(url => pool.request(url))
const results = await Promise.all(promises)

// DNS 预解析和预连接
function preconnect(url) {
  const link = document.createElement('link')
  link.rel = 'preconnect'
  link.href = url
  document.head.appendChild(link)
}

// 预加载资源
function prefetch(url) {
  const link = document.createElement('link')
  link.rel = 'prefetch'
  link.href = url
  document.head.appendChild(link)
}

// 预获取数据
async function preloadData(url) {
  const response = await fetch(url)
  const data = await response.json()
  // 缓存到内存或 localStorage
  sessionStorage.setItem(`preload_${url}`, JSON.stringify(data))
  return data
}

// 安全的跨域请求配置
fetch('https://api.example.com/data', {
  mode: 'cors', // 明确指定 CORS 模式
  credentials: 'include', // 携带 cookie
  headers: {
    'Content-Type': 'application/json'
  }
})
  .then(response => {
    // 检查响应来源
    const allowedOrigins = ['https://api.example.com']
    const responseOrigin = response.headers.get('Access-Control-Allow-Origin')
    
    if (!allowedOrigins.includes(responseOrigin)) {
      throw new Error('非法的响应来源')
    }
    
    return response.json()
  })

// 添加 CSRF token
function getCsrfToken() {
  const meta = document.querySelector('meta[name="csrf-token"]')
  return meta ? meta.getAttribute('content') : ''
}

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'X-CSRF-Token': getCsrfToken()
  },
  body: JSON.stringify({ data: 'example' })
})

// 安全地处理响应数据
async function safeFetch(url) {
  const response = await fetch(url)
  const text = await response.text()
  
  // 对用户输入进行转义
  function escapeHtml(unsafe) {
    return unsafe
      .replace(/&/g, '&')
      .replace(/</g, '&lt;')
      .replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;')
      .replace(/'/g, '&#039;')
  }
  
  // 安全解析响应
  async function parseJsonResponse(response) {
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}: ${response.statusText}`)
    }
    try {
      return await response.json()
    } catch (error) {
      throw new Error('JSON 解析失败')
    }
  }
}

// 不要在 URL 中传递敏感信息
// ❌ 错误示例
fetch('/api/user?password=123456')

// ✅ 正确示例:使用 POST 请求体
fetch('/api/user', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ password: '123456' })
})

// 清理敏感数据的日志
function sanitizeForLog(data) {
  const sensitive = ['password', 'token', 'secret', 'key']
  const sanitized = { ...data }
  
  for (const key of sensitive) {
    if (sanitized[key]) {
      sanitized[key] = '***REDACTED***'
    }
  }
  
  return sanitized
}

console.log('请求数据:', sanitizeForLog(requestData))

// fetch 函数类型
declare function fetch(
  input: RequestInfo | URL,
  init?: RequestInit
): Promise<Response>

// RequestInit 类型
interface RequestInit {
  method?: string
  headers?: HeadersInit
  body?: BodyInit | null
  mode?: RequestMode
  credentials?: RequestCredentials
  cache?: RequestCache
  redirect?: RequestRedirect
  referrer?: string
  referrerPolicy?: ReferrerPolicy
  integrity?: string
  keepalive?: boolean
  signal?: AbortSignal | null
  window?: any
}

// Response 类型
interface Response {
  readonly headers: Headers
  readonly ok: boolean
  readonly redirected: boolean
  readonly status: number
  readonly statusText: string
  readonly type: ResponseType
  readonly url: string
  clone(): Response
}

// 通用的请求响应类型
interface ApiResponse<T = any> {
  code: number
  message: string
  data: T
}

// 封装 fetch 函数
async function request<T>(
  url: string,
  options?: RequestInit
): Promise<ApiResponse<T>> {
  // 超时控制
  const controller = new AbortController()
  const timer = setTimeout(() => controller.abort(), options?.timeout || 10000)
  
  try {
    const response = await fetch(url, {
      ...options,
      signal: controller.signal
    })
    
    if (!response.ok) {
      throw new Error(`HTTP ${response.status}`)
    }
    
    return await response.json() as ApiResponse<T>
  } catch (error) {
    if (error instanceof DOMException && error.name === 'AbortError') {
      throw new Error('请求超时')
    }
    throw error
  } finally {
    clearTimeout(timer)
  }
}

// request.js - 统一请求封装
class HttpClient {
  constructor(config = {}) {
    this.baseURL = config.baseURL || ''
    this.timeout = config.timeout || 10000
    this.headers = config.headers || {}
  }
  
  // 请求拦截器
  interceptors = {
    request: [],
    response: []
  }
  
  // 注册拦截器
  useRequestInterceptor(handler) {
    this.interceptors.request.push(handler)
  }
  useResponseInterceptor(handler) {
    this.interceptors.response.push(handler)
  }
  
  // 核心请求方法
  async request({ url, method = 'GET', params, data, headers = {}, timeout }) {
    const fullUrl = this.baseURL + url
    let config = { url: fullUrl, method, params, data, headers: { ...this.headers, ...headers } }
    
    // 执行请求拦截器
    for (const interceptor of this.interceptors.request) {
      config = await interceptor(config) || config
    }
    
    // 构建请求 URL（处理 params）
    let requestUrl = fullUrl
    if (params) {
      requestUrl += '?' + new URLSearchParams(params).toString()
    }
    
    const controller = new AbortController()
    const timer = setTimeout(() => controller.abort(), timeout || this.timeout)
    
    try {
      const response = await fetch(requestUrl, {
        method,
        headers: config.headers,
        body: data ? JSON.stringify(data) : undefined,
        signal: controller.signal
      })
      
      if (!response.ok) {
        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
      }
      
      let result = await response.json()
      // 执行响应拦截器
      for (const interceptor of this.interceptors.response) {
        result = await interceptor(result) || result
      }
      return result
    } finally {
      clearTimeout(timer)
    }
  }
  
  get(url, params) {
    return this.request({ url, method: 'GET', params })
  }
  post(url, data) {
    return this.request({ url, method: 'POST', data })
  }
}

// 创建默认实例
const http = new HttpClient({ baseURL: '/api' })
http.useResponseInterceptor((response) => {
  // 统一处理业务码
  if (response && response.code !== 0) {
    throw new Error(`HTTP ${response.status}: ${response.message}`)
  }
  return response
})

export default http

// api.js - API 接口定义
import http from './request'

export const userApi = {
  // 获取用户列表
  getList(params) {
    return http.get('/users', params)
  },
  
  // 获取用户详情
  getDetail(id) {
    return http.get(`/users/${id}`)
  },
  
  // 创建用户
  create(data) {
    return http.post('/users', data)
  },
  
  // 更新用户
  update(id, data) {
    return http.request({ url: `/users/${id}`, method: 'PUT', data })
  },
  
  // 删除用户
  remove(id) {
    return http.request({ url: `/users/${id}`, method: 'DELETE' })
  }
}

// 使用示例
async function loadUserList() {
  try {
    const result = await userApi.getList({ page: 1, size: 10 })
    console.log('用户列表:', result)
  } catch (error) {
    console.error('加载失败:', error)
  }
}

打开方式: F12 -> Network 标签

查看内容:
- 请求 URL 和方法
- 请求头和响应头
- 请求体和响应体
- 时间线(DNS、连接、等待、下载)
- Cookie 和 Storage
- 请求大小和耗时

// 打印请求详情
fetch('/api/data')
  .then(response => {
    console.log('Response:', response)
    console.log('Status:', response.status)
    console.log('Headers:', [...response.headers.entries()])
    
    // 克隆响应以便多次读取
    const clonedResponse = response.clone()
    
    // 打印响应体
    response.text().then(text => {
      console.log('Body:', text)
    })
  })
  
  // 打印请求配置
  console.log('Request Options:', options)
})

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log('Response:', data))
  .catch(error => console.error('Error:', error))

// 全局 fetch 拦截器
const originalFetch = window.fetch
window.fetch = function(...args) {
  console.log('Fetch called with:', args)
  
  return originalFetch.apply(this, args)
    .then(response => {
      console.log('Fetch response:', response)
      return response
    })
    .catch(error => {
      console.error('Fetch error:', error)
      throw error
    })
}

// 测量请求耗时
async function measureRequest(url) {
  const start = performance.now()
  
  const response = await fetch(url)
  
  const end = performance.now()
  const duration = end - start
  
  console.log(`请求耗时: ${duration.toFixed(2)}ms`)
  console.log(`请求 URL: ${url}`)
  console.log(`响应状态: ${response.status}`)
  
  return { url, duration, status: response.status }
}

// 批量性能测试
async function benchmark(urls) {
  const results = []
  for (const url of urls) {
    const result = await measureRequest(url)
    results.push(result)
  }
  
  console.table(results)
  return results
}

// 增强的错误处理
class FetchError extends Error {
  constructor(message, response) {
    super(message)
    this.name = 'FetchError'
    this.response = response
    this.status = response?.status
    this.url = response?.url
  }
}

async function fetchWithErrorTracking(url, options = {}) {
  const start = performance.now()
  try {
    const response = await fetch(url, options)
    if (!response.ok) {
      throw new FetchError(`HTTP ${response.status}`, response)
    }
    return await response.json()
  } catch (error) {
    // 构造错误信息
    const errorInfo = {
      name: error.name,
      message: error.message,
      url,
      method: options.method || 'GET',
      status: error.response?.status,
      duration: performance.now() - start,
      timestamp: new Date().toISOString()
    }
    
    // 发送到错误监控系统
    console.error('Error tracked:', errorInfo)
    
    // 也可以发送到服务器
    // navigator.sendBeacon('/api/errors', JSON.stringify(errorInfo))
    throw error
  }
}

Access to fetch at 'https://api.example.com/data' from origin 'https://example.com' 
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present 
on the requested resource.

// 服务端设置示例(Node.js/Express)
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'https://example.com')
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization')
  res.header('Access-Control-Allow-Credentials', 'true')
  next()
})

// ❌ 错误:将二进制当作文本处理
fetch('/api/image.png')
  .then(response => response.text())
  .then(text => console.log(text)) // 乱码

// ✅ 正确:使用 blob 或 arrayBuffer
fetch('/api/image.png')
  .then(response => response.blob())
  .then(blob => {
    const url = URL.createObjectURL(blob)
    document.querySelector('img').src = url
  })

// 或使用 arrayBuffer 处理二进制数据
fetch('/api/data.bin')
  .then(response => response.arrayBuffer())
  .then(buffer => {
    const view = new DataView(buffer)
    // 处理二进制数据
  })

TypeError: Failed to execute 'text' on 'Response': body stream is locked

// ❌ 错误:多次读取
fetch('/api/data')
  .then(response => {
    response.json() // 第一次读取
    response.text() // 第二次读取会报错
  })

// ✅ 正确:使用 clone()
fetch('/api/data')
  .then(response => {
    const clone1 = response.clone()
    const clone2 = response.clone()
    // clone1 和 clone2 可以分别读取
    return clone1.json()
  })
  .then(data => {
    // 多次使用 data
    console.log(data)
    processData(data)
    saveData(data)
  })

// 1. 分片上传
async function uploadFileInChunks(file, chunkSize = 1024 * 1024) {
  const totalChunks = Math.ceil(file.size / chunkSize)
  
  for (let i = 0; i < totalChunks; i++) {
    const start = i * chunkSize
    const end = Math.min(start + chunkSize, file.size)
    const chunk = file.slice(start, end)
    
    const formData = new FormData()
    formData.append('chunk', chunk)
    formData.append('index', i)
    formData.append('totalChunks', totalChunks)
    formData.append('filename', file.name)
    
    try {
      await fetch('/api/upload', {
        method: 'POST',
        body: formData
      })
      // 更新上传进度
      console.log(`上传进度: ${((i + 1) / totalChunks * 100).toFixed(0)}%`)
    } catch (error) {
      // 上传失败,保存进度
      saveUploadProgress(fileId, i)
      throw error
    }
  }
}

// 1. 使用 keepalive(适用于小数据)
window.addEventListener('beforeunload', () => {
  fetch('/api/analytics', {
    method: 'POST',
    body: JSON.stringify({ action: 'leave' }),
    keepalive: true // 注意:body 大小不能超过 64KB
  })
})

// 2. 使用 sendBeacon(推荐)
window.addEventListener('beforeunload', () => {
  const data = JSON.stringify({ action: 'leave', timestamp: Date.now() })
  navigator.sendBeacon('/api/analytics', data)
})

// 3. 使用 visibilitychange 事件
document.addEventListener('visibilitychange', () => {
  if (document.visibilityState === 'hidden') {
    // 页面隐藏时发送数据
    const data = JSON.stringify({ action: 'hide' })
    navigator.sendBeacon('/api/analytics', data)
  }
})

// 使用 AbortController 管理请求生命周期
class FetchManager {
  constructor() {
    this.controllers = new Map()
  }
  
  fetch(id, url, options = {}) {
    // 取消之前的请求
    this.abort(id)
    
    const controller = new AbortController()
    this.controllers.set(id, controller)
    
    return fetch(url, { ...options, signal: controller.signal })
      .then(response => {
        // 请求完成后移除控制器
        this.controllers.delete(id)
        return response.json()
      })
      .catch(error => {
        this.controllers.delete(id)
        if (error.name !== 'AbortError') throw error
      })
  }
  
  // 取消单个请求
  abort(id) {
    const controller = this.controllers.get(id)
    if (controller) {
      controller.abort()
      this.controllers.delete(id)
    }
  }
  
  // 取消所有请求
  abortAll() {
    this.controllers.forEach(controller => controller.abort())
    this.controllers.clear()
  }
}

const fetchManager = new FetchManager()

// 页面卸载时清理
window.addEventListener('beforeunload', () => {
  fetchManager.abortAll()
})